function waveInit()
{
  if(wave)
  {
    //log('set callbacks');
    wave.setStateCallback(stateUpdated);
  }                    
  else
  {
    log("no wave");
  }
}

function log(text)
{
  $("#log").append("<p>"+text+"</p>");
}

function stateUpdated()
{
  log('updated');
  var size=10;
  var colors=['blue', 'red'];
  
  var state=wave.getState();
  
  var points=[0,0];
        
  for(var y=0; y<size*2; y++)
  {
    for(var x=0; x<size*2; x++)
    {
      cellId=x+'_'+y;
      cellState=parseInt(state.get(cellId, '-1'), 10);
      if(cellState!=-1)
      {
        //log('non-gray: '+cellId+' '+cellState);        
       
        points[cellState]=points[cellState]+1;
        var color=colors[cellState];              
        
        if(y%2==0)
        {
          $('#cell_'+x+'_0_'+y+'_1').addClass(color);
          $('#cell_'+x+'_1_'+y+'_1').addClass(color);
          $('#cell_'+x+'_0_'+y+'_2').addClass(color);
          $('#cell_'+x+'_1_'+y+'_2').addClass(color);
        }
        else
        {
          $('#cell_'+(x-1)+'_0_'+y+'_1').addClass(color);
          $('#cell_'+(x-1)+'_0_'+y+'_2').addClass(color);
          $('#cell_'+x+'_1_'+y+'_1').addClass(color);
          $('#cell_'+x+'_1_'+y+'_2').addClass(color);        
        }
      }
    }
  }

  var toplay=state.get('toplay', '0');
  var players=JSON.parse(state.get('players', '[]'));
  if(players.length==0)
  {
    $("#playersContainer").html("<b>Players</b><br/>No one");
  }
  else
  {
    $("#playersContainer").html('<b>Players</b><br/><ul id="playerList"></ul>');
    
    for(var x=0; x<players.length; x++)
    {
      var player=players[x].split('@')[0];
      if(x==toplay)
      {
        $("#playerList").append('<li> <div style="border: solid 1px black; width: 10px; height: 10px; background-color: '+colors[x]+';" class="swatch"/> <b>'+player+'</b></li>');
      }
      else
      {
        $("#playerList").append('<li> <div style="border: solid 1px black; width: 10px; height: 10px; background-color: '+colors[x]+';" class="swatch"/> '+player+'</li>');
      }
    }
  }
}

function place()
{
  var hexId=$(this).attr('hexpos');
  var l=hexId.split('_');
  var x=parseInt(l[0], 10);
  var y=parseInt(l[1], 10);

  log('place: '+hexId);
  
  var viewer=wave.getViewer().getId();
  var state=wave.getState();
  
  var delta={};
  var dirty=false;

  var toplay=parseInt(state.get('toplay', '0'), 10);
  var players=JSON.parse(state.get('players', '[]'));
  var playerId=players.indexOf(viewer);
  if(playerId==-1) // Not currently playing
  {
    if(players.length<2) // Start playing
    {
      players.push(viewer)
      playerId=players.indexOf(viewer);
      delta['players']=JSON.stringify(players);
    }
    else // Full up
    {
      log('full up');
      return;
    }
  }

  if(playerId!=toplay) // Playing out of turn
  {
    log('out of turn '+playerId+' '+toplay);
    return;
  }
  
  var oldCell=parseInt(state.get(hexId, '-1'));
  if(oldCell==-1) // Cell is empty, valid move
  {
    delta[hexId]=playerId;
    dirty=true;    
    
    if(toplay==0)
    {
      delta['toplay']=1
    }
    else
    {
      delta['toplay']=0
    }
  }
  else // Cell is not empty, invalid move
  {
    log('invalid move');
    return;
  }

  if(dirty)
  {
    state.submitDelta(delta);
    //log('changed '+delta);
  }  
}

function init()
{
  //log('init');
  createHexBoard(10);
  $(".hexBoardCell").click(place);
  waveInit();
}

$(document).ready(init());

